﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">	
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
	<form class="navbar-form navbar-left" role="search">
	  <div class="form-group">
		<input type="text" class="form-control" placeholder="Search">
	  </div>
	  <button type="submit" class="btn btn-default">Submit</button>
	</form>
    </div>
  </div>
</nav>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>


<nav>
  <ul class="pagination">

    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
	<li><a href="#">下一页</a></li>
  </ul>
</nav>

<div class="jumbotron">
	<div class="container">
	  <h1>Hello, world!</h1>
	  <p>...</p>
	  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
	</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="/" class="thumbnail">
      <img src="3.png" alt="图片不见了">
    </a>
  </div>
  我的
</div>


<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>


<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

<!--华丽的分割线-->
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
   <li class="list-group-item">
    <span class="badge">15</span>
    Cras justo odio
  </li>
</ul>


<div class="well">Look, I'm in a well! </div>

全功能加响应式表格	
<div class="table-responsive">
	<table class="table table-striped table-bordered table-hover table-condensed">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
	</table>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">这个地址访问不了</script>-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/jquery-2.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>